<template>
  <div>
    <selectWithoutHttp
      v-model="selectWidget.options.defaultValue"
      :list-data="listData"
      clearable
      placeholder="请选择"
      label-name="name"
      key-name="id"
      class="width240"
      @change="handelChange" />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';

export default {
  components: { selectWithoutHttp },
  model: {
    prop: 'selectWidget',
    event: 'changeData'
  },
  props: {
    selectWidget: {
      type: Object,
      default: () => ({})
    },
    widgetData: {
      type: Object,
      default: () => ({ list: [], config: {}})
    }
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    listData() {
      const arr = [{ id: 0, name: '用户一级部门' }];
      if (this.selectWidget.options.selectChild) {
        arr.push({ id: 1, name: '用户当前部门' });
      }
      // 需要遍历widgetData，如果是type为user且isCondition为true,则将该item保存到department中
      if (this.widgetData.list && this.widgetData.list.length) {
        this.forEachList(this.widgetData.list, arr);
      }
      return arr;
      /*
      if (this.selectWidget.options.selectChild) {
        return [
          { id: 0, name: '用户一级部门' }, { id: 1, name: '用户当前部门' }
        ];
      }
      return [{ id: 0, name: '用户一级部门' }]; */
    }
  },
  watch: {
    'selectWidget.options.selectChild': {
      handler(val) {
        this.initValue();
      }
    }
  },
  methods: {
    forEachList(list, arr) {
      // 栅格布局下的表单需要另做处理
      for (let i = 0; i < list.length; i++) {
        if (list[i].type === 'grid' && list[i].columns) {
          for (let j = 0; j < list[i].columns.length; j++) {
            if (list[i].columns[j].list) {
              this.forEachList(list[i].columns[j].list, arr);
            }
          }
        }
        if (list[i].type === 'user' && list[i].options.isCondition) {
          arr.push({ id: list[i].key, name: list[i].name + '一级部门' });
        }
      }
      return arr;
    },
    initValue() {
      const multiple = this.selectWidget.options.multiple;
      this.$set(this.selectWidget, 'value', multiple ? [] : '');
      this.selectWidget.options.defaultValue = '';
    },
    handelChange(e) {
      if (e === 0) {
        // 回填当前用户一级部门
        if (this.userInfo.deptName && this.userInfo.deptName.length > 0) {
          const dept = this.userInfo.deptName[0];
          this.setValue({ id: dept.id, name: dept.name });
        }
      } else if (e === 1) {
        // 回填当前用户第一个当前部门
        const currentDepartment = this.userInfo.currentDepartment;
        if (currentDepartment && currentDepartment.length > 0) {
          const multiple = this.selectWidget.options.multiple;
          if (multiple) {
            const deptList = currentDepartment.map(i => {
              return { id: i.id, nameL: i.name };
            });
            this.$set(this.selectWidget, 'value', deptList);
          } else {
            const dept = currentDepartment[0];
            this.setValue({ id: dept.id, name: dept.name });
          }
          // 当前部门
        } else if (this.userInfo.deptName && this.userInfo.deptName.length) {
          // 一级部门
          const dept = this.userInfo.deptName[0];
          this.setValue({ id: dept.id, name: dept.name });
        }
      } else {
        // this.initValue();
        this.$set(this.selectWidget, 'value', '');
        this.$set(this.selectWidget.options, 'defaultValue', e);
      }
    },
    setValue(val) {
      const multiple = this.selectWidget.options.multiple;
      this.$set(this.selectWidget, 'value', multiple ? [val] : val);
    }
  }
};
</script>

<style lang="scss" scoped>
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
</style>
